<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="lancoll-container">
            <div>
                <h1 style="text-align: center;">Language Collection</h1>
                <div style="text-align: center;">
                    <span>已收藏语集：{{ total }}</span>
                </div>
                <el-divider></el-divider>
            </div>
            <div class="lancoll-info" v-for="item in langColleList" :key="item.id">
                <p>{{ item.sentence }}</p>
                <el-divider content-position="right">
                    <span class="el-icon-user-solid" style="font-size: 12px;">{{ item.createdBy }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="el-icon-time" style="font-size: 12px;">{{ $moment(item.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </el-divider>
            </div>
            <div class="study-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
                    layout="sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";
import langColleApi from "@/api/langColle";

export default {
    components: {
        NavigationBar,
    },
    data() {
        return {
            page: {},
            pageData: null,
            pageSize: 10,
            total: null,
            currentPage1: 1,
            langColleList: []
        };
    },
    methods: {
        // methods here
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = { pageNo: this.currentPage1, pageSize: val };
            console.log(`每页 ${val} 条`);
            this.fetchPageData(this.page);
        },
        handleCurrentChange(val) {
            this.currentPage1 = val;
            this.page = { pageNo: val, pageSize: this.pageSize };
            console.log(`当前页: ${val}`);
            this.fetchPageData(this.page);
        },
        async fetchPageData(page) {
            try {
                const response = await langColleApi.queryByPage(page); // 传入当前页数据
                this.pageData = response; // 将获取的数据存储在组件的状态中
                this.langColleList = response.result; // 将获取的数据存储在组件的状态中
                this.total = response.total; // 将获取的数据存储在组件的状态中
                console.log('获取数据成功:', this.pageData); // 打印获取的数据
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
    },
    mounted() {
        // 组件挂载时调用获取数据的方法
        this.page = { pageNo: this.currentPage1, pageSize: this.pageSize };
        this.fetchPageData(this.page); // 组件创建时调用数据获取方法
    }
};
</script>

<style scoped>
.lancoll-container {
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 200px;
    /* background-color: #f2f2f2; */
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.lancoll-info {
    font-size: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.study-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
</style>
